<template lang="pug">
.body-container
  .header-container
    Header(:seller="seller")
  .tab-container
    Tab(:tabs="tabs")
</template>

<script>
import Header from '~/components/header/header'
import Tab from '~/components/tab/tab'
import Productions from '~/components/productions/productions'
import Rating from '~/components/rating/rating'
import Seller from '~/components/seller/seller'
import User from '~/components/user/user'
import {mapState} from 'vuex'
import {getInitialTabIndexFromLocalStorage} from '../static/lib/ui'

export default {

  //- // 鉴权中间件
  //- middleware: 'wechat-auth',

  computed: {
    tabs() {
      return [
        {
          index: 0,
          label: '商品',
          component: Productions
        },
        {
          index: 1,
          label: '评价',
          component: Rating
        },
        {
          index:2,
          label: '商家',
          component: Seller
        },
        {
          index:3,
          label: '我',
          component: User
        }
      ]
    },
    ...mapState({
      seller: 'seller',
    })
  },

  async beforeMount () {
    
    //- 用vue的route对象从url中获取查询参数
    const id = this.$route.query.id

    //- 用vue的route对象从url中获取RestAPI风格参数
    //- const id = this.$route.params.id

    //- 用querystring库解析url中的查询参数
    //- const id = qs.parse(location.search).id

    await this.$store.dispatch('getSeller', id)
    console.log('获取seller')
    console.log(this.seller)

    //- 从localStorage中取出tab页码，跳转到user页签
    // 在user页签初始化代码中读取spring boot传过来的cookie中读取user，存入localStorage、vuex
    let initialTabIndex = getInitialTabIndexFromLocalStorage(id)
    this.$store.dispatch('setCurrentTabIndex', initialTabIndex)
    console.log('initialTabIndex:')
    console.log(initialTabIndex)

    // this.$store.dispatch('getSeller').then((res)=>{
    //   console.log('获取seller')
    //   this.seller = res
    //   console.log(this.seller)
    // })    
  },

  async mounted() {
    // console.log('进入mounted')

    // //- 用vue的route对象从url中获取查询参数
    // const sellerId = this.$route.query.id

  },

  components: {
    Header,
    Tab,
    Productions,
    Rating,
    Seller
  }
}
</script>

<style lang="stylus" scoped>
.body-container
  position:absolute
  display:flex
  width:100%
  height:100%
  flex-direction: column
  .header-container
    flex:0 0 140px
  .tab-container
    flex:1

</style>
